<template>
  <div class="incon">
      <div class="banimg">
          <img src="https://brup.shengri.cn/goods/2021/04/FjN1JOTCzdbb8Nv0qw6263uPPhLs.png" alt="">
      </div>     
               <ul class="list">
            <li v-for="(v,i) in arr" :key="i">
                <!-- <img :src="v.imgfirst" alt="" @click="fun()"> -->
                 <router-link :to="{name:'Flowerinfo',query:{flowerId:v.flowerId}}"><img :src="v.imgfirst" alt=""></router-link>
                <h3 class="title">{{v.title}}</h3>
                <p class="title1">{{v.title1}}</p>
                <p class="price">￥<span class="now">{{v.nowprice}}</span> <span class="ori">￥{{v.oriprice}}</span></p>
            </li>
        </ul>
  </div>
</template>

<script>
import {getlink} from "a/getapi.js"
export default {
    data(){
     return{ arr:[],
     num:''
      }
    },
    mounted(){ 
        this.num= this.$route.query.index
        getlink("/demo/mom").then((ok)=>{          
            this.arr=ok.data.momflower.flower;
            switch(this.num){
                case 0:
                   this.arr=this.arr.slice(0,7);
                   break;
                case 1:
                    this.arr=this.arr.slice(7,14);
                   break;
                 case 2:
                    this.arr=this.arr.slice(14,20);
                   break;
                 case 3:
                    this.arr=this.arr.slice(20,25);
                   break;
            }   
        })
    },
}
</script>



<style scoped>
.incon{
    width: 100%;
    margin-top: 0.8rem;
}
.banimg{
    width: 100%;
    height: 2.2rem;
    margin-bottom: 0.04rem;
}
.banimg img{
    width: 100%;
    height: 2.2rem;

}
.list{
width: 100%;
display: flex;
justify-content: space-between;
padding:0 0.04rem ;
box-sizing: border-box;
flex-wrap: wrap;
font-size: 0.16rem;
}
.list li{
    width: 1.78rem;
    height: 2.78rem;
    flex-shrink: 0;
    text-align: center;
}
.list li img{
    width: 1.78rem;
    height: 1.78rem;
}
.title{
    color:#606060;
    font-weight: 500;
    font-size: 0.15rem;
}
.title1{
    color: #aaaaaa;
      font-size: 0.15rem;

}
.price{
   color:#e1746a ;
   font-size: 0.14rem;
}
.ori{
    text-decoration: line-through;
    color: #b8b8b8;
}
</style>